import battery from '@/assets/img/ico_battery.png';
import series from '@/assets/img/ico_series.png';
import temperature from '@/assets/img/ico_temperature.png';
import { Flex } from 'antd';
import React from 'react';
import Styles from './StationMonitor.less';

type Iprop = {
  monitorData: monitorDataType;
};
type monitorDataType = {
  cellConnect: number | undefined;
  tmax: number | undefined;
  tmaxName: string | undefined;
  tmaxIndex: string | undefined;
  tmin: number | undefined;
  tminName: string | undefined;
  tminIndex: string | undefined;
  socMax: number | undefined;
  socMaxName: string | undefined;
  socMaxIndex: string | undefined;
  socMin: number | undefined;
  socMinName: string | undefined;
  socMinIndex: string | undefined;
  batteryType1: number | undefined;
  batteryType2: number | undefined;
  dailyAccumulateInput: number | undefined;
  dailyAccumulateOutput: number | undefined;
};
const StationMonitor: React.FC<Iprop> = (Props) => {
  const { monitorData } = Props;
  return (
    <>
      <Flex vertical={true} justify="space-between" style={{ height: '80%' }} gap={'large'}>
        <Flex>
          <div style={{ width: 85 }}>
            <img src={temperature} alt={''} />
          </div>
          <Flex vertical={true} style={{ flex: 1.2 }}>
            <div className={Styles.title}>全站最高温度{monitorData.tmax}℃</div>
            <div className={Styles.content}>位置：{monitorData.tmaxName}</div>
            <div className={Styles.content}>编码：{monitorData.tmaxIndex}</div>
          </Flex>
          <Flex vertical={true} style={{ flex: 1.2 }}>
            <div className={Styles.title}>全站最低温度{monitorData.tmin}℃</div>
            <div className={Styles.content}>位置：{monitorData.tminName}</div>
            <div className={Styles.content}>编码：{monitorData.tminIndex}</div>
          </Flex>
        </Flex>
        <Flex>
          <div style={{ width: 85 }}>
            <img src={battery} alt={''} />
          </div>
          <Flex vertical={true} style={{ flex: 1.2 }}>
            <div className={Styles.title}>全站最高SOC{monitorData.socMax}%</div>
            <div className={Styles.content}>位置：{monitorData.socMaxName}</div>
            <div className={Styles.content}>编码：{monitorData.socMaxIndex}</div>
          </Flex>
          <Flex vertical={true} style={{ flex: 1.2 }}>
            <div className={Styles.title}>全站最低SOC{monitorData.socMin}%</div>
            <div className={Styles.content}>位置：{monitorData.socMinName}</div>
            <div className={Styles.content}>编码：{monitorData.socMinIndex}</div>
          </Flex>
        </Flex>
        <Flex>
          <div style={{ width: 85 }}>
            <img src={series} alt={''} />
          </div>
          <Flex vertical={true}>
            <div className={Styles.title}>当日累计充放电量</div>
            <div className={Styles.content}>充电量：{monitorData.dailyAccumulateInput}kWh</div>
            <div className={Styles.content}>放电量：{monitorData.dailyAccumulateOutput}kWh</div>
          </Flex>
        </Flex>
      </Flex>
    </>
  );
};

export default StationMonitor;
